import {ITodoData} from '../module/data'
export default class ProcessingDom {
    todoWrapper:HTMLElement
    constructor(wrapper:HTMLElement){
        this.todoWrapper = wrapper
    }
    createItem(todo:ITodoData){
        return `
            <i>${todo.id}</i>
            <input type="checkbox" ${todo.completed?'checked':null} data-id="${todo.id}">
            <span>${todo.content}</span>
            <button data-id="${todo.id}" class="del">删除</button>
        `
    }
    addDom(todo:ITodoData):void{
        const children = document.createElement("div");
        children.className="item"
        children.innerHTML = this.createItem(todo)
        this.todoWrapper.appendChild(children)
    }
    //修改视图
    changeDom(dom:HTMLElement){
        const parentNode = dom.parentNode as HTMLElement
        parentNode.querySelector('input').checked = true;
        parentNode.querySelector("span").style.textDecoration = "line-through"
    }
    removeDom(dom:HTMLElement){
        const parentNode = dom.parentNode as HTMLElement
        parentNode.remove()
    }
}